<template>
  <!-- 商品分类页面 -->
  <view class="commodity">
    <!-- 1.搜索框组件 -->
    <searchInput></searchInput>

    <!-- 2.分类容器 -->
    <view class="main">
      <!-- 2-1 菜单栏 -->
      <view class="menuWarapper">
        <!-- 遍历菜单栏 -->
        <view
          :class="['menuItem',activeIndex===index?'active':'']"
          v-for="(item,index) in menuList"
          :key="index"
          @click="clickIndex(index)"
        >
          <navigator>{{item}}</navigator>
        </view>
      </view>
      <!-- 2-2 菜单内容 -->
      <scroll-view class="menuContent" scroll-y :scroll-top='scrollTop'>
        <view v-for="item in menuContent" :key="item.cat_id">
          <!-- 内容标题 -->
          <view class="menuTitle" >
            <text>/</text>
            <text>{{item.cat_name}}</text>
            <text>/</text>
            </view>
          <!-- 内容info -->
          <view class="menuInfo">
             <navigator v-for="itema in item.children" :key='itema.cat_id'>
               <image :src='itema.cat_icon'></image>
               <text>{{itema.cat_name}}</text>
             </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import searchInput from "../../components/searchInput";
//商品分类总数据
let commodityList = [];
export default {
  components: {
    searchInput
  },
  data() {
    return {
      //左侧菜单栏
      menuList: [],
      //右侧菜单栏内容
      menuContent: [],
      //当前选项
      activeIndex: 0,
      //重置滚动距离
      scrollTop:0
    };
  },
  //微信的声明周期，类似vue的 mounted
  onLoad() {
    uni.showLoading({
      title: '加载中',
      mask: true
    });
    //数据缓存
    //判断本地是否有商品数据，如果没有就要发送请求
    //缓存数据，时间和数据数组
    //判断，categoryList：商品数据；ategoryTime:数据的存储时间
    let categoryTime=uni.getStorageSync('category').time
    let categoryList=uni.getStorageSync('category').list||[]
    //1.有category
    if(categoryList.length){
      //1.直接用
      commodityList=categoryList
     
       //2.左侧菜单栏赋值
        this.menuList = commodityList.map(el => {
          return el.cat_name;
        });
        //3.右侧菜单栏内容区赋值
        this.menuContent = commodityList[this.activeIndex].children;
        console.log(this.menuContent);
        console.log('有数据');
         //数据获取之后隐藏加载
        wx.hideLoading();
        
      //2.缓存过期 （缓存事件暂定2分钟 120*1000）
       if(Date.now()-categoryTime>120*1000){
         console.log('数据过期');
         //重新获取数据   
         this.getCategory()
       }
    }
    //3.没有category
    else{
      //获取数据
     this.getCategory()  
      console.log('没数据，发请求');
      }
  },
  //方法
  methods: {
    //1.商品分类数据请求
    getCategory(){
        uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
      })
      .then(res => {
        //存储缓存数据
         uni.setStorageSync('category',{time: Date.now(),list:res[1].data.message})
        //1.商品总数据赋值
        commodityList = res[1].data.message;
        console.log(commodityList);
        //2.左侧菜单栏赋值
        this.menuList = commodityList.map(el => {
          return el.cat_name;
        });
        //3.右侧菜单栏内容区赋值
        this.menuContent = commodityList[this.activeIndex].children;
        console.log(this.menuContent);
          //数据获取之后隐藏加载
          wx.hideLoading();
      });
    },
    //2.左侧菜单栏点击事件
    clickIndex(index) {
      console.log(index);
      //1.改变当前选项的数据
      this.activeIndex = index;
      //2.改变滚动位置
      this.scrollTop=Math.random()/1000
       //3.右侧菜单栏内容区赋值
      this.menuContent = commodityList[this.activeIndex].children
    }
  }
};
</script>

<style lang='scss'>
.commodity {
  height: 100vh;
  display: flex;
  //改变主轴方向
  flex-direction: column;

  //分类容器
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    /* 菜单栏(左) */
    .menuWarapper {
      width: 200rpx;
      overflow: auto;
      .menuItem {
        // display: flex;
        // justify-content: center;
        // align-content: center;
        color: #666;
        text-align: center;
        line-height: 80rpx;
        height: 80rpx;
        font-size: 30rpx;
      }
      //当前选项
      .active {
        color: $uni-color-theme;
        border-left: 2px solid $uni-color-theme;
      }
    }
    /* 菜单内容（右）*/
    .menuContent {
      flex: 1;
      overflow: auto;
      .menuTitle{
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #bbb;
        font-size: 30rpx;
        text:nth-child(2){
          padding:0 10rpx;
          color: #000;
        }
      }
      .menuInfo{
        display: flex;
        flex-wrap: wrap;
        //链接标签
        navigator{
         box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 33.3%;
           //占位，在图片没出来的时候，给一个背景框
          image{
           width: 90rpx;
           height: 90rpx;
           background: rgba(0,0,0,.1);
          }
          text{
            font-size: 30rpx;
            color: #666;
          }
        }
        }
    }
  }
}
</style>